<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8" />
	<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
	<meta http-equiv="X-UA-Compatible" content="ie=edge" />
	<meta name="x5-orientation" content="portrait" />
	<meta name="x5-fullscreen" content="true" />
	<meta name="screen-orientation" content="portrait" />
	<meta name="full-screen" content="yes" />
	<link rel="stylesheet" type="text/css" href="css/reset.css" />
	<link rel="stylesheet" type="text/css" href="css/dropload.css"/>
	<link rel="stylesheet" type="text/css" href="css/layer_mobile.css"/>
	<link rel="stylesheet" type="text/css" href="css/personal_maintain.css"/>
	<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
	<script type="text/javascript" src="js/vue1.0.js"></script>
	<script type="text/javascript" src="js/dropload.min.js"></script>
	<script type="text/javascript" src="js/layer_mobile.js"></script>
	<script type="text/javascript" src="js/index.js"></script>
	<title>我的订单</title>
</head>
<body>
	<!-- header_头部 -->
	<header>
		<div>
			<a href="personal_center.html"></a>
			<form action="" method="post">		
				<label><i></i><input class="search" type="text" value="" placeholder="搜索订单号" /></label>
			</form>
		</div>
	</header>
	<!-- nav_导航条 -->
	<nav>
		<div>
			<a href="personal_maintain.html">全部</a>
		</div>
		<div>
			<a href="personal_main1.html">待付款</a>
		</div>
		<div>
			<a href="personal_main2.html">已付款</a>
		</div>
		<div class="active">
			<a href="personal_main3.html">已完成</a>
		</div>
	</nav>
	<!-- section_订单内容 -->
	<section>
		<!-- 代付款 -->
		<ul class="ullist stocks">
		</ul>
	</section>
</body>
</html>
<script>
	$(".search").keyup(function(){
    	search()
	});
	//搜索功能,提交ajax数据到后台
	var key =  $(".search").val()
	function search(){
		page = 0 ;
	    var html =''
	    var key =  $(".search").val()
	    $.ajax({
	        url: site+"/upkeep/myOrder",
	        data: {userId:loca_fetch('userid'),order:key,page:page,type:3},
	        type: 'get',
	        dataType: 'json',
	        beforeSend:function(){
					$('ul li').css({'display':'none'})	
					$("body").append('<div id="pload" style="position:fixed;top:50%;z-index:1200;background:url(images/icon/loading-2.gif) top center no-repeat;width:100%;height:142px;margin:auto auto;"></div>');  
				},
	        complete: function () {  
	               $("#pload").remove();  
	               $('ul li').css({'display':'block'})
	        }, 
	        success: function (data) {
	        	var jsons = data.data.content
	            if(data.code==1){
	                $.each(jsons,function(i,val){
	                	var dates = getMyDate(val.createTime)
	                    //这一步是显示数据的关键，each方法可以操作二维数组数据
	                    //data.data：php返回的数据；
	                    //no：键值；
	                    //items:内层数组内容
	                    var url = site+"/upkeep/myOrder?user_id="+loca_fetch('userid');
	                    //拼接数据
						html += 
							"<li>\n"
							+"<a class='payments' data-moder="+val.morderId+" href=\"javascript:;\">\n"
							+"	<div class=\"indent_title\">\n"
							+"		<img class=\"left\" src=\"images/icon/icon_35.png\" alt=\"\" />\n"
							+"		<i class=\"right\">已完成</i>\n"
							+"	</div>\n"
							+"	<div class=\"indent_main\">\n"
							+"		<em class=\"left\"><img src=\""+val.photo+"\" alt=\"\" /></em>\n"
							+"		<span class=\"left\">\n"
							+"			<i>"+ val.goodsName +"</i>\n"
							+"			<b>"+ dates +"<i></i><strong>下单</strong></b>\n"
							+"			<strong>实付:<i>¥"+ val.totalPrice.toFixed(2) +"</i></strong>\n"
							+"		</span>\n"
							+"		<div class=\"right\">\n"
							+"			<p class=\"indent_num\">x"+ val.boxNumber +"</p>\n"
							+"			<em data-moder="+val.morderId+" class=\"remove_moder\">删除订单</em>\n"
							+"		</div>\n"
							+"	</div>\n"
							+"</a>\n"
							+"</li>"
	                        
	                });
	                $('.stocks').html(html)//显示数据，同时覆盖上一次搜索的数据
                   	$('.payments').on('click',function(){
                        var str = $(this).attr('data-moder');
                        var int = str*1;
                        loca_save('moderids',parseInt(str))
                        window.location.href='./payment_details1.html'
                    })
                   	remove()
	            }
	        },
	    });
	}	
	var page = -1
	//已完成
	if(loca_fetch('userid') == ''){
    	$('section').hide()
    }else{
    	$('section').show()
		$('.stocks').dropload({
			scrollArea : window,
			loadDownFn : function(me){
				page++;
				//拼接html
				var result = '';
				//获取数据
				$.ajax({
					type:"get",
					url:site+"/upkeep/myOrder?page="+page+'&type='+3,
					dataType:'json',
					data:{userId:loca_fetch('userid'),order:key},
					success:function(data){
						var jsons = data.data.content	
						if(jsons.length > 0){
							$.each(jsons, function(i,val) {
								//时间戳
								var dates = getMyDate(val.createTime)
								result += 
									"<li>\n"
									+"<a class='payments' data-moder="+val.morderId+" href=\"javascript:;\">\n"
									+"	<div class=\"indent_title\">\n"
									+"		<img class=\"left\" src=\"images/icon/icon_35.png\" alt=\"\" />\n"
									+"		<i class=\"right\">已完成</i>\n"
									+"	</div>\n"
									+"	<div class=\"indent_main\">\n"
									+"		<em class=\"left\"><img src=\""+val.photo+"\" alt=\"\" /></em>\n"
									+"		<span class=\"left\">\n"
									+"			<i>"+ val.goodsName +"</i>\n"
									+"			<b>"+ dates +"<i></i><strong>下单</strong></b>\n"
									+"			<strong>实付:<i>¥"+ val.totalPrice.toFixed(2) +"</i></strong>\n"
									+"		</span>\n"
									+"		<div class=\"right\">\n"
									+"			<p class=\"indent_num\">x"+ val.boxNumber +"</p>\n"
									+"			<em data-moder="+val.morderId+" class=\"remove_moder\">删除订单</em>\n"
									+"		</div>\n"
									+"	</div>\n"
									+"</a>\n"
									+"</li>"
							});
						//如果没有数据
						}else{
							//锁定
							me.lock()
							//无数据
							me.noData();
						}
						setTimeout(function(){
							//插入数据到页面，放到最后
							$('.stocks').append(result);
							//每次数据插入，必须重置
							me.resetload();
							$('.payments').on('click',function(){
								var str = $(this).attr('data-moder');
								var int = str*1;
								loca_save('moderids',parseInt(str))
								window.location.href='./payment_details1.html'
							})
							remove()
						});
					},
					error : function(xhr,type){
						//即使加载出错也必须重置
					}
				});
			}
		})
	}	
	function remove(){
   		//删除订单 		
	    $('.remove_moder').on('click',function(e){
	    	e.stopPropagation()	    	
			var str = $(this).attr('data-moder');
			var int = str*1;
			loca_save('moderid',parseInt(str))
			btnremove()
    	})
	}  
</script>